<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <el-row>
          <el-col :span="6" style="background:green">
            <el-input v-model="q.beanName" placeholder="请输入beanname"></el-input>
          </el-col>
          <el-col :span="10" class="text-left">
            <el-button @click="query()">查询</el-button>
            <el-button type="primary" @click="openDiolog('add')">新增</el-button>
            <el-button type="primary" @click="openDiolog('edit')">修改</el-button>
            <el-button type="primary" @click="del()">删除</el-button>
            <el-button type="primary" @click="pause()">暂停</el-button>
            <el-button type="primary" @click="resume()">恢复</el-button>
            <el-button type="primary" @click="run()">立即执行</el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="danger" style="float:right" @click="openLogDiolog()">日志列表</el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top:2rem;">
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="jobId" label="任务ID"></el-table-column>
            <el-table-column prop="beanName" label="bean名称"></el-table-column>
            <el-table-column prop="params" label="参数"></el-table-column>
            <el-table-column prop="cronExpression" label="cron表达式"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.status==0">正常</el-tag>
                <el-tag type="danger" v-if="scope.row.status==1">暂停</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="margin-top:2rem;">
      <el-col :span="20" :offset="2">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page"
          :page-sizes="[10, 20, 30, 40]" :page-size="q.limit" layout="total, sizes, prev, pager, next, jumper"
          :total="q.total">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="新增或编辑" :visible.sync="dialogFormVisible">
      <el-row>
        <el-col :span="4" :offset="2">
          <p style="text-align:center">bean名称</p>
        </el-col>
        <el-col :span="16">
          <el-input placeholder="spring bean名称" v-model="task.beanName"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" :offset="2">
          <p style="text-align:center">参数</p>
        </el-col>
        <el-col :span="16">
          <el-input placeholder="参数" v-model="task.params"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" :offset="2">
          <p style="text-align:center">cron表达式</p>
        </el-col>
        <el-col :span="16">
          <el-input placeholder="如：0 0 1 2 * * ?" v-model="task.cronExpression"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" :offset="2">
          <p style="text-align:center">备注</p>
        </el-col>
        <el-col :span="16">
          <el-input placeholder="备注" v-model="task.remark"></el-input>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDiolog()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="日志列表" :visible.sync="dialogLogVisible" width="100%">
      <el-row>
        <el-col :span="6" style="background:green">
          <el-input v-model="q_log.beanName" placeholder="请输入beanname"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button @click="querylog()">查询</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top:1rem;">
        <el-col>
          <el-table :data="logData">
            <el-table-column prop="logId" label="id"></el-table-column>
            <el-table-column prop="jobId" label="任务id"></el-table-column>
            <el-table-column prop="beanName" label="beanName"></el-table-column>
            <el-table-column prop="params" label="参数"></el-table-column>
            <el-table-column prop="error" label="错误信息"></el-table-column>
            <el-table-column prop="times" label="耗时(毫秒)"></el-table-column>
            <el-table-column prop="createTime" label="执行时间"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="margin-top:2rem;">
        <el-col>
          <el-pagination @size-change="handleLogSizeChange" @current-change="handleLogCurrentChange"
            :current-page="q_log.page" :page-sizes="[8, 20, 30, 40]" :page-size="q_log.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="q_log.total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>

  </div>

</template>

<script>
  //import func from '../../vue-temp/vue-editor-bridge';
  // @ is an alias to /src
  //import HelloWorld from '@/components/HelloWorld.vue'
  import _ from "lodash"

  export default {
    name: 'Home',
    data() {
      return {
        q: {
          beanName: "",
          page: 1,
          limit: 10,
          total: 1
        },
        q_log: {
          beanName: "",
          page: 1,
          limit: 8,
          total: 1
        },
        baseurl: this.$store.state.url,
        tableData: [],
        logData: [],
        multipleSelection: [],
        dialogFormVisible: false,
        dialogLogVisible: false,
        diologType: "add",
        task: {
          jobId: "",
          beanName: "",
          params: "",
          cronExpression: "",
          remark: ""
        }

      }
    },
    components: {
      //HelloWorld
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(limit) {
        this.q.limit = limit
        this.reload()
      },
      handleLogSizeChange(limit) {
        this.q_log.limit = limit
        this.reloadLog()
      },
      handleCurrentChange(page) {
        this.q.page = page
        this.reload()
      },
      handleLogCurrentChange(page) {
        this.q_log.page = page
        this.reloadLog()
      },
      query() {
        this.reload()
      },
      querylog() {
        this.reloadLog()
      },
      clearTask() {
        this.task.jobId = ""
        this.task.beanName = ""
        this.task.params = ""
        this.task.cronExpression = ""
        this.task.remark = ""
      },
      closeDiolog() {
        this.dialogFormVisible = false
        this.clearTask()
      },
      openDiolog(type) {
        if (type == "edit") {
          if (this.multipleSelection.length == 0) {
            this.$message({
              message: '未选择任何任务',
              type: 'warning'
            });
          } else if (this.multipleSelection.length > 1) {
            this.$message({
              message: '只可选择一条任务',
              type: 'warning'
            });
          } else {
            this.dialogFormVisible = true
            this.diologType = "edit"
            this.task = _.cloneDeep(this.multipleSelection[0])
          }

        } else if (type == "add") {
          this.diologType = "add"
          this.clearTask()
          this.dialogFormVisible = true
        }
      },
      openLogDiolog() {
        this.q_log.beanName=""
        this.reloadLog()
        this.dialogLogVisible = true
      },
      submit() {
        this.dialogFormVisible = false
        if (this.diologType == "add") {
          this.axios.post(this.baseurl + "/sys/schedule/save", this.task).then(res => {
            if (res.data.code == 0) {
              this.$message({
                type: 'success',
                message: '新增成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: '新增失败!'
              });
            }
            this.reload()
          })
        } else {
          this.axios.post(this.baseurl + "/sys/schedule/update", this.task).then(res => {
            if (res.data.code == 0) {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: '编辑失败!'
              });
            }
            this.reload()
          })
        }
      },
      del() {
        let ids = _.map(this.multipleSelection, "jobId")
        if (ids.length == 0) {
          this.$message({
            message: '未选择任何任务',
            type: 'warning'
          });
        } else {
          this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.post(this.baseurl + "/sys/schedule/delete", ids).then(res => {
              if (res.data.code == 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              } else {
                this.$message({
                  type: 'error',
                  message: '删除失败!'
                });
              }
              this.reload()
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      run() {
        let ids = _.map(this.multipleSelection, "jobId")
        if (ids.length == 0) {
          this.$message({
            message: '未选择任何任务',
            type: 'warning'
          });
        } else {
          this.axios.post(this.baseurl + "/sys/schedule/run", ids).then(res => {
            if (res.data.code == 0) {
              this.$message({
                type: 'success',
                message: '运行成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: '运行失败!'
              });
            }
            this.reload()
          })
        }
      },
      resume() {
        let ids = _.map(this.multipleSelection, "jobId")
        if (ids.length == 0) {
          this.$message({
            message: '未选择任何任务',
            type: 'warning'
          });
        } else {
          this.axios.post(this.baseurl + "/sys/schedule/resume", ids).then(res => {
            if (res.data.code == 0) {
              this.$message({
                type: 'success',
                message: '恢复成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: '恢复失败!'
              });
            }
            this.reload()
          })
        }
      },
      pause() {
        let ids = _.map(this.multipleSelection, "jobId")
        if (ids.length == 0) {
          this.$message({
            message: '未选择任何任务',
            type: 'warning'
          });
        } else {
          this.axios.post(this.baseurl + "/sys/schedule/pause", ids).then(res => {
            if (res.data.code == 0) {
              this.$message({
                type: 'success',
                message: '暂停成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: '暂停失败!'
              });
            }
            this.reload()
            this.reload()
          })
        }
      },
      reload() {
        let that = this
        this.axios.get(this.baseurl + "/sys/schedule/list?" + "beanName=" + this.q.beanName + "&page=" + this.q.page +
          "&limit=" + this.q.limit).then(res => {
          that.$set(that.$data, 'tableData', res.data.page.content)
          that.q.total = res.data.page.total
        })
      },
      reloadLog() {
        let that = this
        this.axios.get(this.baseurl + "/sys/schedulelog/list?" + "beanName=" + this.q_log.beanName + "&page=" + this
          .q_log.page +
          "&limit=" + this.q_log.limit).then(res => {
          that.$set(that.$data, 'logData', res.data.page.content)
          that.q_log.total = res.data.page.total
        })
      }
    },
    created() {
      this.reload()
    }
  }
</script>